<template>
	<view>
		<view class="background-B">
			<u-navbar :background="background" back-icon-color="#9B7C57">
			</u-navbar>
			<view class="programme-title">
				中医调理改善方案
			</view>
			<view v-for="(item,index) in result.chinesePlanVO" :key="index">
				<view class="diet-tiao">
					<view class="diet-title">
						{{item.improveName}}
					</view>
				</view>
				<!-- 线 -->
				<view class="line-view">
				</view>
				<!-- 饮食调理 -->
				<view class="view-food">
					<view class="food-left" v-for="(items,indexs) in item.improveContent" :key="indexs">
						<view class="food-leftV">
						</view>
						{{items}}
						<!-- 将木耳洗净同绿茶叶、鸡蛋入锅加水2碗煮成1碗，1
						次服完，喝汤吃木耳、鸡蛋。 -->
					</view>
				</view>
			</view>

			<!-- 改善搭配 -->
			<view class="w706 suggest" v-show="result.improveGoods.length!=0">
				<view class="ve-title">
					改善搭配
				</view>
				<scroll-view scroll-x="true" class="scrollViews">
					<view class="weui-flex">
						<view v-for="(item,index) in result.improveGoods" :key="index" class="dbox-wiew marrad20">
							<navigator target="miniProgram" open-type="navigate" app-id="wxeb719b5bc850729e"
								:path="item.detailUrl" extra-data="" version="release" hover-class="hoverbgfff">
								<view class="wiewImage">
									<u-lazy-load height="224" border-radius="10" img-mode="aspectFill"
										:image="item.goodsImageUrl"></u-lazy-load>
								</view>
								<view class="view-title">
									<!-- 每一口都是健康的复合固体蛋白饮料 -->
									{{item.title}}
								</view>
								<view style="padding:0 20upx;">
									<view class="commodity-price">
										¥{{item.salePrice}}
									</view>
									<view class="sales-volume">
										月销{{item.goodsSlogan}}
									</view>
								</view>
							</navigator>
						</view>
						<!-- <view class="dbox-wiew">
						<view class="wiewImage">
							<u-lazy-load height="224" border-radius="10" img-mode="aspectFill" image=""></u-lazy-load>
						</view>
						<view class="view-title">
							每一口都是健康的复合固体蛋白饮料
						</view>
						<view style="padding:0 20upx;">
							<view class="commodity-price">
								¥378
							</view>
							<view class="sales-volume">
								月销2011
							</view>
						</view>
					</view> -->
					</view>
				</scroll-view>
			</view>

			<!-- 健康百科 -->
			<view class="w706" v-show="result.articleList.length!=0">
				<view class="ve-title">
					健康百科
					<view class="moreAll" @tap.stop="navurl('/pages/subpackage/find/cyclopedia/cyclopedia')">
						更多
					</view>
				</view>
				<scroll-view scroll-x="true" class="scrollViews">
					<block v-for="(item,idx) in result.articleList" :key="idx">
						<view class="weui-flex articleBody"
							@tap.stop="navurl('/pages/subpackage/find/articleDetails/details?id=' + item.articleId)">
							<view class="articleView">
								<view class="articleContent text-line ellipsis">
									{{item.articleTitle}}
								</view>
								<view class="lockbody">
									<view class="lockView"></view>{{item.readNum}}
								</view>
							</view>
							<view class="articleImage">
								<u-lazy-load border-radius="10" height="160" img-mode="aspectFill"
									:image="item.coverUrl">
								</u-lazy-load>
							</view>
						</view>
						<u-line class="u-line"></u-line>
					</block>
				</scroll-view>
			</view>
			<!-- 健康讲堂 -->
			<!-- v-if="result.goodVideos&&result.goodVideos.length!=0" -->
			<view class="w706 encyclopedia" >
				<view class="weui-flex">
					<view class="weui-flex__item">
						<view class="placeholder titlel">
							健康讲堂
							<view class="moreAll2" @tap.stop="navurl('/pages/subpackage/find/classList/classList')">
								更多
							</view>
						</view>
					</view>
				</view>
				<scroll-view scroll-x="true" class="scrollViews">
					<block v-for="(item,idx) in result.videoList" :key="idx">
						<!-- @tap.stop="userSwc(item,idx)" -->
						<view class="scrollView"
							@tap.stop="navurl('/pages/subpackage/find/video-detail/video-detail?id='+item.albumId)">
							<image :src="item.videoCoverUrl" mode="" style="width: 100%;height: 100%;"></image>
						</view>
					</block>
					<view style="width: 90rpx;display: inline-block;">
					</view>
				</scroll-view>
			</view>
			<!-- end -->
			<view class="w706">
				<view class="ve-title">
					改善计划
					<view class="Jointheplan"
						@tap.stop="navurl('/pages/subpackage/find/planDetails/planDetails?taskId='+result.task.taskId)">
						<image class="Jointheplan-image"
							src="http://static.bsyjk.cn/planicon/FE337342BCD34F65B344B01D9FB2CD67.png"></image>加入计划
					</view>
				</view>
				<view class="card-box">
					<image class="planImage" :src="result.task.taskImage" mode=""
						@tap.stop="navurl('/pages/subpackage/find/planDetails/planDetails?taskId='+result.task.taskId)">
					</image>
					<view class="planImage-flex">
						<view class="flex-viewl">
							{{result.task.taskName}}
						</view>
						<view class="flex-viewr">
							计划天数：{{result.task.taskPeriod}}天
						</view>
					</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>

import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue"
import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"


	export default {
		components: {
			uNavbar,
			uLazyLoad,
			uLine,

		},
		data() {
			return {
				background: {
					backgroundImage: 'none'
				},
				userAnsId:'27',
				result:''
			}
		},
		onLoad(e){
			e.userAnsId =2247
			if(e.userAnsId){//健康报告id
				this.userAnsId = e.userAnsId;
			}
			if(e.constitutionId){//体质id
				this.constitutionId = e.constitutionId;
			}
			this.zYimprove()
		},
		methods: {
			zYimprove(){
				let _this = this;
				this.$api.get(global.apiUrls.zYimprove + '/' +this.constitutionId + '/' + this
					.userAnsId, {}).then(res => {
					if (res.data.code == 1000) {
						let result = res.data.result;
						_this.result = result;
					}
					this.loadingone = false; //懒加载动画
				})
			},
			navurl(url, data) {
				console.log(url,data,4500000)
				// return
				if (data == false||data==undefined) {
					this.$urouter.navigateTo({
						url: url,
						params: {}
					});
				} else {
					this.$urouter.navigateTo({
						url: url,
						params: {
							goodFoods: JSON.stringify(data.goodFoods),
							goodSport: JSON.stringify(data.goodSport),
							improvePlanInfo: JSON.stringify(data.improvePlanInfo),
							goodVideos: JSON.stringify(data.goodVideos)
						}
					});
				}
			},
			// 获取详情
			userAnswer() {
				this.loadingone = true;
				let _this = this;
				this.$api.get(global.apiUrls.userAnswer + '/' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId + '/' + this
					.userAnsId, {}).then(res => {
					if (res.data.code == 1000) {
						let result = res.data.result;
						result.goodFoods = JSON.parse(result.goodFoods)
						let dianindex = result.goodFoods.dateFoodMax.indexOf(".")
						if (result.goodFoods.dateFoodMax.startsWith('.', dianindex)) {
							result.goodFoods.dateFoodMax = result.goodFoods.dateFoodMax.substring(0, result
								.goodFoods.dateFoodMax.indexOf(".") + 2)
						}
						// result.goodFoods.dateFoodMax = result.goodFoods.dateFoodMax.toFixed(1)
						result.goodSleep = JSON.parse(result.goodSleep)
						result.goodSport = JSON.parse(result.goodSport)
						result.improvePlanInfo = JSON.parse(result.improvePlanInfo)
						result.kindScore = JSON.parse(result.kindScore)
						result.recommendedGoods = JSON.parse(result.recommendedGoods)
						result.riskDisease = JSON.parse(result.riskDisease)
						result.goodArticles = JSON.parse(result.goodArticles).slice(0, 2)
						if (result.goodVideos) {
							result.goodVideos = JSON.parse(result.goodVideos)
						}
						console.log(result)
						_this.result = result;
					}
					this.loadingone = false; //懒加载动画
				})
			}
		}
	}
</script>

<style lang="scss">
	.content-text {
		font-size: 36upx;
		font-weight: 300;
		color: #333333;
		line-height: 64upx;
	}

	.articleBody {
		padding: 30upx 26upx;
	}

	.articleImage {
		width: 200upx;
		height: 160upx;
	}

	.articleContent {
		width: 440upx;
		height: 84upx;
		font-size: 30upx;
		font-weight: 500;
		color: #333333;
		line-height: 42upx;
	}
	.lockbody {
		padding: 45upx 0 0;
		font-size: 26upx;
		font-weight: 400;
		color: #999999;
		line-height: 37upx
	}

	.lockView {
		width: 50upx;
		height: 28upx;
		background: #C0C4CC;
		float: left;
		background: url(http://static.bsyjk.cn/seeIcon/37C6382B372045CCB803A7F2DE1D24EA.png)no-repeat;
		background-size: 44upx 28upx;
	}
	.w706 {
		width: 706upx;
		background: #DED4BD;
		margin: 30upx auto 0;
		padding: 20upx;
		border-radius: 25upx;
		.ve-title{
			    height: 80upx;
			    font-size: 36rpx;
			    font-weight: bold;
			    line-height: 80upx;
				color: #9B7C57;
				position: relative;
		}
	}
	.background-B {
		width: 750upx;
		min-height: 750upx;
		background: url(http://static.bsyjk.cn/programmetop/7E559151AB7D416D849200DA0EEDE197.png)no-repeat #F9F3E8;
		background-size: 750upx 750upx;

		.programme-title {
			color: #9B7C57;
			font-size: 40upx;
			font-weight: normal;
			margin: 98upx 30upx 0;
		}

		.diet-tiao {
			width: 335upx;
			height: 62upx;
			background: #6A302F;
			border-radius: 8upx;
			padding-top: 1px;
			margin-left: 30upx;
			margin-top: 10upx;

			.diet-title {
				width: 322upx;
				height: 50upx;
				border-radius: 8upx;
				border: 1px solid #FFFFFF;
				line-height: 50upx;
				text-align: center;
				margin: 2upx auto 0;
				color: #fff;
			}
		}

		.line-view {
			width: 690upx;
			height: 2upx;
			background: #9B7C57;
			margin: 20upx auto 30upx;
		}

		.view-food {
			width: 706upx;
			background: #DED4BD;
			padding: 30upx;
			margin: 30upx auto 46upx;
			border-radius: 25upx;

			.food-left {
				position: relative;
				padding-left: 10upx;
				color: #9B7C57;

				.food-leftV {
					width: 10upx;
					height: 26upx;
					background: #9B7C57;
					border-radius: 5upx;
					position: absolute;
					top: 6upx;
					left: -10upx;
				}
			}
		}
	}
	.see-task {
		height: 74upx;
		line-height: 74upx;
		text-align: center;
		font-size: 22upx;
		font-weight: 400;
		color: #9B9B9B;

		.see-icon {
			position: relative;
		}

		.see-icon:before {
			content: '';
			width: 25upx;
			height: 25upx;
			position: absolute;
			top: 4upx;
			left: -30upx;
			background: url(http://pic.kangtuhz.com/duigicon/338DE8F43F2B4023BE5AD2E074A206DA.png)no-repeat;
			background-size: 25upx 25upx;
		}
	}

	.dbox-wiew {
		width: 321upx;
		height: 399upx;
		background: #F5F5F5;
		border-radius: 16upx;
		margin-right: 24upx;
		.wiewImage {
			width: 321upx;
			height: 224upx;
		}

		.view-title {
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
			line-height: 42upx;
			padding: 12upx 22upx 19upx;
		}

		.commodity-price {
			font-size: 26upx;
			font-weight: 500;
			color: #F56767;
			line-height: 37upx;
			float: left;
		}

		.sales-volume {
			font-size: 24upx;
			font-weight: 400;
			color: #999999;
			line-height: 33upx;
			float: right;
		}
	}

	.encyclopedia {
		padding: 24upx;
		box-sizing: border-box;
		border-radius: 16upx;
		opacity: 0.9;

		.imgr {
			width: 200upx;
			height: 160upx;
		}

		.titlel {
			height: 42px;
			font-size: 36upx;
			font-weight: bold;
			color: #9B7C57;
			line-height: 42upx;
		}

		.contentStyle {
			width: 440upx;
			height: 84upx;
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
			line-height: 42upx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.lookbf {
			height: 37upx;
			font-size: 26upx;
			font-weight: 400;
			color: #999999;
			line-height: 37upx;
			position: relative;
			left: 60upx;
		}

		.lookbf:before {
			content: '';
			width: 44upx;
			height: 28upx;
			position: absolute;
			top: 4upx;
			left: -60upx;
			background-size: 44upx 28upx;
		}

		.belowLine {
			position: relative;
		}

		.belowLine:before {
			content: '';
			width: 100%;
			height: 2upx;
			position: absolute;
			bottom: 0;
			background: #EEEEEE;
			opacity: 0.9;
		}
	}

	.scrollViews {
		white-space: nowrap;
		display: flex;
		.articleContent{
			color: #9B7C57;
		}
		.lockbody{
			color: #9B7C57;
		}
		.scrollView {
			width: 317upx;
			height: 221upx;
			background: pink;
			display: inline-block;
			margin-right: 20upx;
			border-radius: 10upx;
			position: relative;
		}

		.scrollView:before {
			content: '';
			width: 41upx;
			height: 41upx;
			position: absolute;
			z-index: 1;
			bottom: 9upx;
			right: 11upx;
			background: url(http://static.bsyjk.cn/vidioplay/2B8379F67F904AFB90B7C7413DF6E528.png)no-repeat;
			background-size: 41upx 41upx;
		}
	}

	.Jointheplan {
		width: 166upx;
		height: 44upx;
		background: #9B7C57;
		border-radius: 42upx;
		font-size: 24upx;
		line-height: 44upx;
		color: #fff;
		position: absolute;
		right: 0;
		top: 25upx;

		.Jointheplan-image {
			width: 28upx;
			height: 28upx;
			display: block;
			float: left;
			margin: 6upx 10upx 0 10upx;
		}
	}



	.card-box {
		width: 675upx;
		height: 214upx;
		border-radius: 15upx;
		overflow: hidden;
		position: relative;

		.planImage {
			width: 675upx;
			height: 214upx;
			border-radius: 15upx;
		}

		.planImage-flex {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			display: flex;
			color: #fff;
			opacity: 0.64;
			background: linear-gradient(164deg, #BD995E 0%, #000000 100%);
			border-radius: 0 0 30upx 30upx;
			padding: 0 20upx;

			.flex-viewl,
			.flex-viewr {
				width: 50%;
			}

			.flex-viewr {
				text-align: right;
			}
		}

	}



	.go-text {
		width: 582upx;
		height: 105upx;
		line-height: 105upx;
		// background-color:pink;
		margin: 33upx auto 74upx;
		text-align: center;
		font-size: 30upx;
		background: url(http://static.bsyjk.cn/improvebtn/6633F2D7B7DD48C891E020F766C5F416.png)no-repeat;
		background-size: 582upx 105upx;
	}

	.moreAll,
	.moreAll2 {
		height: 80upx;
		font-size: 26upx;
		font-weight: 400;
		color: #9B7C57;
		line-height: 80upx;
		float: right;
		padding-right: 42upx;
		position: relative;
	}

	.moreAll:before,
	.moreAll2:before {
		content: '';
		position: absolute;
		top: 20upx;
		right: 0upx;
		width: 36upx;
		height: 36upx;
		background: url(http://pic.kangtuhz.com/arrows/1CB6DDEEB08E4CE0A40E8E86A99D1A0D.png)no-repeat;
		background-size: 36upx 36upx;
	}

	.moreAll2 {
		height: 60upx;
		font-size: 26upx;
		font-weight: 400;
		line-height: 60upx;
	}

	.moreAll2:before {
		top: 10upx;
	}

	.noneJianyi {
		font-size: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-weight: bold;
	}
</style>
